<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="(item, index) in breadcrumbItems" :key="index">
      {{ item.name }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

const breadcrumbItems = computed(() => {
  const matchedRoutes = route.matched;
  return matchedRoutes
    .filter((route) => route.name !== "Layout")
    .map((route) => ({
      name: route.meta.breadcrumb || route.name,
      path: route.path,
    }));
});
</script>

<style scoped>
.el-breadcrumb {
  margin: 20px 0;
}
</style>
